<template>
	<div id="container" :style="{ height: height, width: width }"></div>
</template>

<script lang="ts">
//高德地图
import '@amap/amap-jsapi-types';
import AMapLoader from '@amap/amap-jsapi-loader';

export default defineComponent({
	name: 'auth',
	props: {
		height: { type: String, default: '100%' },
		width: { type: String, default: '100%' },
		amapConfig: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},

	setup(props, ctx) {
		const state = reactive({
			map: {},
			AMap: null,
			bounds: [],
		});
		// 获取布局配置信息
		const mapConfig = computed(() => {
			let config = Object.assign($store.systemConfig.amapConfig, props.amapConfig);
			return config;
		});
		window._AMapSecurityConfig = {
			securityJsCode: mapConfig.value.securityJsCode,
		};
		const initMap = () => {
			AMapLoader.load({
				key: mapConfig.value.key, //设置您的key
				version: mapConfig.value.version,
				plugins: mapConfig.value.plugins,
				AMapUI: mapConfig.value.AMapUI,
				Loca: mapConfig.value.Loca,
			}).then((AMap) => {
				state.AMap = AMap;
				if (mapConfig.value.area) {
					//所属行政区划不为空，只显示该行政区划地图数据
					AMap.plugin('AMap.DistrictSearch', function () {
						var districtSearch = new AMap.DistrictSearch(mapConfig.value.districtSearch);

						// 搜索行政区划信息
						districtSearch.search(mapConfig.value.area, function (_status: any, result: any) {
							// 查询成功时，result即为对应的行政区信息
							const bounds = result.districtList[0].boundaries;
							let mask = [];
							for (var i = 0; i < bounds.length; i += 1) {
								mask.push([bounds[i]]);
							}
							state.bounds = bounds;
							state.map = new AMap.Map('container', {
								mask: mask,
								center: mapConfig.value.center,
								viewMode: mapConfig.value.viewMode,
								rotateEnable: mapConfig.value.rotateEnable,
								pitchEnable: mapConfig.value.pitchEnable,
								showLabel: mapConfig.value.showLabel,
								zoom: mapConfig.value.zoom,
								zooms: mapConfig.value.zooms,
								pitch: mapConfig.value.pitch,
								rotation: mapConfig.value.rotation,
								mapStyle: mapConfig.value.mapStyle,
								buildingAnimation: mapConfig.value.buildingAnimation, //楼块出现是否带动画
							});
							if (mapConfig.value.lockMapBounds) {
								lockMapBounds(state.map);
							}

							ctx.emit('initMap', state);
						});
					});
				} else {
					state.map = new AMap.Map('container', {
						center: mapConfig.value.center,
						viewMode: mapConfig.value.viewMode,
						rotateEnable: mapConfig.value.rotateEnable,
						pitchEnable: mapConfig.value.pitchEnable,
						showLabel: mapConfig.value.showLabel,
						zoom: mapConfig.value.zoom,
						zooms: mapConfig.value.zooms,
						pitch: mapConfig.value.pitch,
						rotation: mapConfig.value.rotation,
						mapStyle: mapConfig.value.mapStyle,
						buildingAnimation: mapConfig.value.buildingAnimation, //楼块出现是否带动画
					});
					if (mapConfig.value.lockMapBounds) {
						lockMapBounds(state.map);
					}
					ctx.emit('initMap', state);
				}
			});
		};
		//限制地图显示范围
		const lockMapBounds = (map: any) => {
			let boundsConfig = mapConfig.value.lockMapBounds;
			let bounds = null;
			if (boundsConfig) {
				if (boundsConfig.northEast && boundsConfig.northEast.length > 0 && boundsConfig.southWest && boundsConfig.southWest.length > 0) {
					bounds = new AMap.Bounds(boundsConfig.northEast, boundsConfig.southWest);
				} else {
					bounds = map.getBounds();
				}
				map.setLimitBounds(bounds);
			}
		};
		onMounted(() => {
      nextTick(()=>{
        initMap();
      })
		});
		return {
			...toRefs(state),
		};
	},
});
</script>
